<!--
 * @Author: ganxiaochuan
 * @Date: 2020-10-19 07:17:31
 * @LastEditors: ganxiaochuan
 * @LastEditTime: 2021-02-19 17:42:38
 * @Description: 修改密码弹窗
-->
<template>
  <el-dialog
    :title="$t('XGMM')"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    v-bind="dialogProps"
    width="500px"
    :close-on-click-modal="false"
    center
  >
    <div class="content-wrap">
      <el-form>
        <el-form ref="form" :model="data" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('JMM')" prop="oldPassword">
                <el-input v-model="data.oldPassword" type="password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('XMM')" prop="newPassword">
                <el-input v-model="data.newPassword" type="password">
								</el-input>
								<el-popover
									placement="bottom-end"
									width="270"
									v-model="showValidatePasswordInfo"
									trigger="manual">
									<img slot="reference" class="validate-password" src="../assets/images/gantanhao.png" alt="" @click="showValidatePasswordInfo = !showValidatePasswordInfo">
									<p>
                    <i v-if="data.newPassword && data.newPassword.length !== 0" :style="{
                      color: is_PassPasswordlength ? '#6DD400' : '#FE6363'
                    }" :class="is_PassPasswordlength ? 'el-icon-check' : 'el-icon-close'"></i>
                    密码长度8-18个字符;
                  </p>
									<p>
                    <i v-if="data.newPassword && data.newPassword.length !== 0" :style="{
                      color: is_PassPasswordType ? '#6DD400' : '#FE6363'
                    }" :class="is_PassPasswordType ? 'el-icon-check' : 'el-icon-close'"></i>
                    同时包含数字/字母/符号三种组合;
                  </p>
									<p>
                    <i v-if="data.newPassword && data.newPassword.length !== 0" :style="{
                      color: is_PassPasswordContinuity ? '#6DD400' : '#FE6363'
                    }" :class="is_PassPasswordContinuity ? 'el-icon-check' : 'el-icon-close'"></i>
                    不能包含连续4位相同/递增(减)的数字;
                  </p>
								</el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('QRXMM')" prop="confirmPassword">
                <el-input v-model="data.confirmPassword" type="password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dialog from "../mixins/dialog";
import apis from '@/apis'
import file from '../mixins/file'
import validate from '../mixins/validate'
import password from '../mixins/password'
import {mapState,mapActions} from 'vuex'
import DEV_CONFIG from '@/config'

export default {
  mixins: [dialog, file, validate, password],
  data() {
    return {
      showValidatePasswordInfo: false,
      is_PassPasswordType: false, // 判断密码强度
      is_PassPasswordlength: false, // 判断密码类型
      is_PassPasswordContinuity: false, // 判断密码是否是连续
      data: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: this.$t('QSRJMM'),
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('QSRXMM'),
            trigger: 'blur'
          },
          {
            validator: this.passwordStrengthCheck,
            trigger: 'change'
          }
        ],
        confirmPassword: [
          {
            required: true,
            message: this.$t('QSRQRRMM'),
            trigger: 'blur'
          },
          {
						validator: this.secondCheck,
						trigger: 'blur',
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(['CONFIG', 'userName', 'userMobile', 'DROPDOWNBOX']),
    changePasswordApi() {
      return apis._api_sysuser_changePwd
    }
  },
  methods: {
    ...mapActions(['loginOut']),
    confirm() {
      this.showValidatePasswordInfo = false
      this.$refs.form.validate((valid) => {
        if (valid && this.is_PassPasswordType && this.is_PassPasswordlength && this.is_PassPasswordContinuity) {
          this.beforeConfirm().then(() => {
            // const formData = {}
            // const timestamp = (new Date()).getTime() + this.CONFIG.timestamp
            // formData.timestamp = timestamp
            // formData.oldPassword = this.passwordCrypt(this.data.oldPassword, timestamp)
            // formData.newPassword = this.passwordCrypt(this.data.newPassword, timestamp)
            const formData = {}
            console.log(DEV_CONFIG)
            formData.username = this.userName || this.userMobile
            formData.IsEncypt = true
            formData.sysId = DEV_CONFIG.SYSTEM_CODE || 'DDXT'
            formData.oldPass = this.data.oldPassword
            formData.newPass = this.data.newPassword
            this.$http.post(this.changePasswordApi, formData).then((res) => {
              if (res.data.code === 200) {
                this.closeDialog()
                this.$http.post(apis._auth_logout).then(res => {
                  // console.log(res)
                  if (res) {
                    this.loginOut()
                    if (this.DROPDOWNBOX.SYSTEM_URL.length > 0) {
                      let ssoUrl = this.DROPDOWNBOX.SYSTEM_URL.filter(
                        item => item.label === DEV_CONFIG.SYSTEM_CODE.toLowerCase()
                      )
                      let cmccUrl = this.DROPDOWNBOX.SYSTEM_URL.filter(
                        item => item.label === 'cmcc'
                      )
                      if (DEV_CONFIG.USE_CMCC_SSO_LOGIN) {
                        window.location.href = `${cmccUrl[0].value}/dsports-sso/login?service=${ssoUrl[0].value}`
                      } else {
                        this.$router.push({
                          name: 'login'
                        })
                      }
                      // let login_url = DEV_CONFIG.USE_CMCC_SSO_LOGIN ? `${cmccUrl[0].value}/dsports-sso/login?service=${ssoUrl[0].value}` : `/#/login`
                    }
                  }
                })
                this.$emit('onComplete')
              }
            })
          }).catch(e => {
            if (e) {
              console.error(e)
            }
          })
        } else {
          this.showValidatePasswordInfo = true
        }
      })
    },
    /**
     * @function 弹窗打开前的方法（开发人员覆盖这个方法）
     */
    /* beforeOpenDialog() {
      // 这里写打开弹窗前的操作，留给开发人员覆盖
      return new Promise((resolve) => {
        resolve()
      })
    }, */
    /**
     * @function 弹窗打开后的方法（开发人员覆盖这个方法）
     */
    afterOpenDialog() {
      // 弹窗打开后的方法（开发人员覆盖这里）
    },
    /**
     * @function 确认点击后，执行操作前的钩子函数
     */
    beforeConfirm() {
      return new Promise(resolve => {
        this.data.filePath = this.data.iconPath
        this.data.icon_path = this.data.iconPath
        resolve()
      })
    },
    /**
     * @function 关闭弹窗前的事件（开发人员覆盖这个方法）
     */
    beforeCloseDialog() {
      return new Promise((resolve) => {
        this.showValidatePasswordInfo = false
        resolve()
      })
    },
    /**
     * @function 关闭弹窗后的方法（开发人员覆盖这个方法）
     */
		afterCloseDialog() {},
  }
};
</script>
<style lang="less" scoped>
.content-wrap {
  width: 100%;
	height: 100%;
	.validate-password{
		position: absolute;
		right: 8px;
		top: 8px;
  }
}
</style>
